<template>
    <div>
        <h2>Devices List</h2>
        <div>
            <div v-for="device in groundControls" :key="device.name">
                {{ device.name }} - {{ device.ip }} - {{ device.role }}
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, computed } from 'vue';
import axios from 'axios';
import { WifiDevice } from "./models"
const devices = ref<WifiDevice[]>([
    {
        name: 'Station-Controller',
        ip: '192.168.1.2',
        role: 'ground-control',
    },
    {
        name: 'DF11',
        ip: '192.168.1.7',
        role: 'locomotive-control',
    }
]);

const groundControls = computed(() => {
    return devices.value.filter(device => device.role === 'ground-control');
});

onBeforeMount(() => {
    axios.get('/api/devices/all')
        .then(response => {
            devices.value = response.data;
        })
        .catch(error => {
            console.error('There was an error fetching the devices!', error);
        });
});
</script>
